<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue指令(上)</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="d1">
    v-text:<p v-text="msg"></p>
    v-html:<p v-html="msg"></p>

    <!--
        由于Vue属于前端技术,其一般使用VSCode进行开发
        IDEA对Vue的某些语法并不识别
        因此,可能会出现报错的情况
        但是这并不是错误,而是由于IDEA不是被该语法
        其不影响运行
    -->
    <button v-on:click="f1()">测试1</button><br/>
    <!--
        可以使用@代理v-on:
        且如果调用的函数没有参数,可以省略括号
    -->
    <button @click="f1">测试2</button><br/>
    <button @click="f2('admin')">测试3</button><br/>
    <!--
        将$event作为实参,表示事件对象,包含事件的相关信息
        通过其target属性可以取出事件源
    -->
    <button @click="f2($event.target)">测试4</button><br/>
    <!--
        取出用户在输入框中输入的数据
        同样可以通过$event.target取出事件源
        此处即为input元素
        该元素的value属性表示服务器值
        即用于输入的数据
    -->
    <input type="text" @input="f2($event.target.value)"/><br/>
    <button @click="f3">测试5</button><br/>
    <!-- 可以在事件操作的通过直接进行赋值操作 -->
    <button @click="msg='Hello Vue'">测试5</button>
</div>
<script>
    new Vue({
        el:"#d1",
        data:{msg:"<h1>Hello Vue</h1>"},
        methods:{
            f1:function(){
                console.log("正在执行f1方法")
            },
            // 使用ES6的简写方式
            f2(args){
                console.log(args);
            },
            f3(){
                // 此处无法直接访问数据仓库中的数据
                // 但是可以访问到Vue
                // 通过this可以访问Vue中的内容
                // 因此,想要访问数据仓库的变量,则通过this.变量名进行访问
                this.msg="Hello World";
            }
        }
    });
</script>
</body>
</html>